﻿<html>
<head>
  <title>Simply Weather Settings</title>
  <style type="text/css">
    body { margin: 0; width: 300px; height: 380px; }
    img { float: left; margin-right: 15px; height: 32px; width: 32px; }
    div { margin-bottom: 8px; }
    fieldset { text-align: center; padding: 7px 0; }
    input { margin-top: 3px; }
    #loc { width: 190px; }
    #wp, #custom_title { width: 300px; }
    #currentloc { font-weight: bold; }
    #locations { height: 23px; }
  </style>
  <script src="scripts/jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
    jQuery.support.cors = true; // force cross-site scripting (as of jQuery 1.5)

    function load() {
      var parent = window.System.Gadget.document.parentWindow;
      $("#currentloc").text(parent.APP.getCity());
      var celsius = (window.System.Gadget.Settings.readString("celsius") == "true");
      $("#celsius").attr("checked", celsius);
      var time24 = (window.System.Gadget.Settings.readString("time24") == "true");
      $("#time").attr("checked", time24);
      window.wp.value = window.System.Gadget.Settings.readString("wp");
      window.System.Gadget.onSettingsClosing = onClosing;
      window.version.innerHTML = window.System.Gadget.version;
      window.custom_title.value = window.System.Gadget.Settings.readString("custom_title");
      $("#find").bind("mousedown", function () { find(window.loc.value); });
    }

    function onClosing(event) {
      if (event.closeAction == event.Action.commit) {
        var place = $("#places").val();
        place && window.System.Gadget.Settings.writeString("location", place);
        var celsius = $("#celsius").attr("checked");
        window.System.Gadget.Settings.writeString("celsius", celsius ? "true" : "false");
        var time24 = $("#time").attr("checked");
        window.System.Gadget.Settings.writeString("time24", time24 ? "true" : "false");
        window.System.Gadget.Settings.writeString("wp", window.wp.value);
        window.System.Gadget.Settings.writeString("custom_title", window.custom_title.value);
      }
      event.cancel = false;
    }

    function showLocations(data) {
      var locations = $(data).find("weather");
      var select = $("<select id='places'>");
      if (locations.length === 0) {
        $("#locations").empty().text("Not found...");
        return;
      }
      for (var i = 0; i < locations.length; ++i) {
        var location = $(locations[i]);
        var option = $("<option>")
            .attr("value", location.attr("weatherlocationcode"))
            .text(location.attr("weatherlocationname"));
        select.append(option);
      }
      $("#locations").empty().append(select);
    }

    function find(location) {
      $.ajax({
        url: "http://weather.service.msn.com/find.aspx?outputview=search&weasearchstr=" + location,
        dataType: "xml",
        success: function (data) { showLocations(data); },
        error: function () { $("#locations").empty().text("Offline"); },
        crossDomain: true
      });
    }

  </script>
</head>
<body onload="load()">
  <div>
    Current: <span id="currentloc"></span><br />
    <br />
    <input id="loc" type="text" />
    &nbsp;
    <button id="find">Find</button>
  </div>
  <div id="locations">
  </div>
  <div>
    <hr/>
    <input type="checkbox" id="celsius" />
    <label for="celsius">Celsius</label><br />
    <input type="checkbox" id="time" />
    <label for="time">24 hour format</label>
  </div>
  <div>
    <br />
    Custom Weather Page:<br />
    <input id="wp" type="text" />
  </div>
  <div>
    Custom Title (replaces the location name):<br />
    <input id="custom_title" type="text" />
  </div>
  <div style="text-align: right">
    by <a href="http://blueonionsoftware.com" onfocus="this.hideFocus=true;">Blue Onion Software</a><br />
    <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5966770" onfocus="this.hideFocus=true;">Donate</a>
  </div>
  <div>
    version: <span id="version"></span>
  </div>
</body>
</html>
